<!--
    Va-Popover 《用于悬浮按钮》

    使用方式：
        <va-popover class="value-item"
                    v-model="item.condition"
                    dictKey="condition"
                    :action="action"
        />
-->

<template>
    <va-load :dictKey="dictKey"
             v-model="modelValue2"
    >
        <template #default="{  options,option }">
            <el-popover
                    placement="top"
                    :width="60"
                    v-model:visible="vaPopoverVisible"
            >
                <ul class="menu-ul">
                    <li v-for="item in options"
                        :key="item.value"
                        @click="checked(item.value),action()"
                        style="overflow:hidden; padding: 0 15px 0 15px">
                        <span style="float: left">{{item.label}}</span>
                        <span style="float: right">{{item.value}}</span>
                    </li>
                </ul>
                <template #reference>
                    <el-button type="text" size="small" @click="vaPopoverVisible = true">
                        {{option.label}}
                    </el-button>
                </template>
            </el-popover>
        </template>
    </va-load>
</template>

<script>
    import {ref, watch} from 'vue'

    export default {
        name: "Va-Popover",
        props: {
            dictKey: {
                type: String,
                default: null
            },
            action: {
                type: Function
            },
            //用于接收v-model值 vue3.0 令名
            modelValue: String,
        },
        created() {
            //加载数据
            // this.load()
        },
        setup(props,context) {

            //选项值
            const modelValue2 = ref(props.modelValue)

            //watch
            watch(() => props.modelValue, (val) => {
                modelValue2.value=val
            })

            let vaPopoverVisible = ref(false)

            const checked = (value) => {
                vaPopoverVisible.value = false
                context.emit("update:modelValue", value)
            }

            return {
                //data
                modelValue2,
                vaPopoverVisible,
                //fun
                checked
            }
        }
    }
</script>

<style lang="less" scoped>
    .menu-ul {
        width: 100%;
        text-align: center;

        li {
            line-height: 30px;
            height: 30px;
            border-radius: 4px;

            &:hover {
                background: #131432;
                color: #DCDFE6;
            }
        }
    }
</style>